'use client';

import ShopRegister from '@/components/login/shop-register';
import UserRegister from '@/components/login/user-register';
import { Button } from '@/components/ui/button';
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from '@/components/ui/card';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { useToast } from '@/hooks/use-toast';
import { authClient } from '@/lib/auth-client';
import { useRouter } from 'next/navigation';
import { useState, useTransition } from 'react';

export default function LoginForm() {
  const [isPending, startTransition] = useTransition();
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
  const { toast } = useToast();
  const { replace } = useRouter();

  return (
    <div className="flex flex-col gap-5 items-center justify-center">
      <Card className="min-w-[450px]">
        <CardHeader>
          <CardTitle>登录</CardTitle>
          <CardDescription>登录到Rin外卖</CardDescription>
        </CardHeader>
        <CardContent>
          <form>
            <div className="grid w-full items-center gap-4">
              <div className="flex flex-col space-y-1.5">
                <Label htmlFor="name">用户名</Label>
                <Input
                  id="name"
                  placeholder="用户名"
                  onChange={(e) => setUsername(e.target.value)}
                  value={username}
                />
              </div>
              <div className="flex flex-col space-y-1.5">
                <Label htmlFor="framework">密码</Label>
                <Input
                  id="framework"
                  type="password"
                  placeholder="密码"
                  onChange={(e) => setPassword(e.target.value)}
                  value={password}
                />
              </div>
            </div>
          </form>
        </CardContent>
        <CardFooter className="flex justify-end">
          <Button
            disabled={isPending}
            onClick={() =>
              startTransition(async () => {
                try {
                  const { error } = await authClient.signIn.username({
                    username,
                    password,
                  });
                  if (error) {
                    toast({
                      title: error.message,
                      variant: 'destructive',
                    });
                    return;
                  }
                  toast({
                    title: '登录成功',
                  });
                  replace('/');
                } catch (error: any) {
                  console.error(error);
                  toast({
                    title: '登录失败,请重试',
                    variant: 'destructive',
                  });
                }
              })
            }
          >
            {isPending && (
              <span className="animate-spin mr-2 i-ri-loader-5-fill" />
            )}
            登录
          </Button>
        </CardFooter>
      </Card>
      <div className="text-xs text-muted-foreground text-center space-y-1.5">
        <div>没有帐号？</div>
        <div className="flex justify-center gap-2">
          <UserRegister />
          <ShopRegister />
        </div>
      </div>
    </div>
  );
}
